<template>
  <div class="box" ref="target"></div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref } from 'vue'
export default {
  setup () {
    // Vue2.x 获取元素
    // this.$refs.target
    // 🔔 Vue3.x 通过 ref 创建关联，模板中还是通过 ref="xxx" 绑定
    const target = ref(null)

    // 组件挂载完毕后，就可以通过 target.value 获取到元素
    onMounted(() => {
      // //console.log(target.value)
    })
    /*
      useIntersectionObserver 函数 - 检测元素可见性
        1.stop 一个可执行的函数用来停止监听行为
        2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
        3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
        特别注意: 默认情况下，对于目标target是否进入视口区域的监听会一直进行
    */
    // 检测元素可见性
    const { stop } = useIntersectionObserver(
      // 被检测的目标元素，可以是组件，也可以是DOM元素
      target,
      ([{ isIntersecting }]) => {
        // 如果元素可见
        if (isIntersecting) {
          // 模拟发送请求
          // //console.log('isIntersecting元素是否可见，发送请求', isIntersecting)
          // 停止检测
          stop()
        }
      }
    )

    return { target }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 1000px auto;
}
</style>
